@import "mixins/mixins";
@import "common/var";
@import "_main";

@include b(pdt) {
  @include e(header) {

  }

  @include e(swipper) {
    height: 349px;
    width: 100%;

    & swiper {
      width: 100%;
      height: 100%;
    }
    & image {
      width: 100%;
      height: 100%;
    }
  }

  @include e(info) {
    margin: 17px 19px 0 15px;
    & .title-view {
      display: flex;
      display: -webkit-flex;
      align-items: center;
      justify-content: space-between;
      & .title {
        font-size: 20px;
        color: #212121;
      }

      & .share {
        width: 20px;
        height: 20px;
        & image {
          width: 100%;
          height: 100%;
          vertical-align: top;
        }
      }
    }

    & .desc {
      font-size: 14px;
      color: #939393;
      & span {
        color: #ff7410;
      }
    }

    & .price {
      margin-top: 22px;
      color: #ff6b00;
      font-size: 19px;
      line-height: 19px;
      & .unit {
        font-size: 11px;
        vertical-align: top;
      }
      & .old-price {
        color: #8c8c8c;
        font-size: 13px;
      }
      & .old-unit {
        font-size: 11px;
        text-decoration: none;
      }
    }
  }

  @include e(content) {
    & .option-container {
      margin: 15px 17px 0 17px;
      border: 1rpx solid #eeeeee;
      border-radius: 4px;
      background: #fafafa;
      & .section {
        display: flex;
        display: -webkit-flex;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        height: 46px;
        font-size: 14px;
        border-bottom: 1rpx solid #e0e0e0;
        & .title {
          padding-left: 16px;
          color: #929292;
        }
        & .value {
          padding-left: 17px;
          color: #3a3a3a;
        }
        & .arrow {
          position: absolute;
          right: 16px;
          width: 15px;
          height: 15px;
          & image {
            width: 100%;
            height: 100%;
          }
        }
        & .tips {
          display: flex;
          display: -webkit-flex;
          align-items: center;
          font-size: 13px;
          color: #8b8b8b;
          line-height: 14px;
          & .icon {
            width: 14px;
            height: 14px;
            margin-right: 4px;
            & image {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      & .section:nth-last-child(1) {
        border-bottom: none;
      }
      & .tip-section {
        justify-content: space-around;
        padding-left: 10px;
        padding-right: 10px;
      }
    }

    & .product-detail {
      margin-top: 40px;
      width: 100%;
      // & > div {
      //   width: 100%;
      // }
      .htmlcontainer {
        width: 100%;
      }
      // .htmlcontainer img {
        // width: 100%;
      // }
      & image {
        width: 100%;
      }
    }
  }

  @include e(footer) {
    position: fixed;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    bottom: 0;
    height: 52px;
    width: 100%;
    background: #fff;

    & .like, .cart {
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-left: 27px;
      font-size: 11px;
      color: #474747;
    }

    & .cart-container {
      position: relative;
    }

    & .bridge {
      position: absolute;
      top: -5px;
      right: -5px;
      font-size: 12px;
      line-height: 18px;
      border-radius: 50%;
      background: #ff6b00;
      width: 18px;
      height: 18px;
      text-align: center;
      color: #fff;
    }

    & image {
      height: 20px;
      width: 20px;
    }

    & .add {
      position: absolute;
      right: 15px;
      & button {
        width: 129px;
        height: 31px;
        background: #ff6b00;
        color: #fff;
        font-size: 15px;
        line-height: 31px;
        border-radius: 16px;
      }
    }
  }

  @include e(markview) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
  }
  @include e(chosesku) {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 450px;
    background: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    & .sku-container {
      padding: 15px 15px 0 15px;
      & .header {
        display: flex;
        display: -webkit-flex;
        align-items: center;
        margin-bottom: 15px;
        & .img {
          width: 112px;
          height: 112px;
          border: 1rpx solid #e0e0e0;
          & image {
            width: 100%;
            height: 100%;
          }
        }
        & .info {
          margin-left: 14px;
        }
        & .price {
          margin-top: 22px;
          color: #ff6b00;
          font-size: 19px;
          line-height: 19px;
          & .unit {
            font-size: 11px;
            vertical-align: top;
          }
          & .old-price {
            color: #8c8c8c;
            font-size: 13px;
          }
          & .old-unit {
            font-size: 11px;
            text-decoration: none;
          }
        }
        & .desc {
          margin-top: 8px;
          color: #313131;
          font-size: 14px;
        }
        & .close {
          position: absolute;
          top: 15px;
          right: 15px;
          width: 30px;
          height: 30px;
          text-align: center;
          & image {
            width: 15px;
            height: 15px;
          }
        }
      }
      & .seperate {
        height: 1px;
        width: 100%;
        background: #e0e0e0;
      }
      & .category {
        margin-top: 15px;
        margin-bottom: 23px;
        color: #212121;
        font-size: 14px;
        & .cate-item {
          display: flex;
          display: -webkit-flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 8px;
          margin-top: 10px;
          height: 38px;
          line-height: 38px;
          border: 1px solid #cfcfcf;
          border-radius: 4px;
        }
      }
    }
    & .color {
      margin-top: 15px;
      margin-bottom: 23px;
      color: #212121;
      font-size: 14px;
      & .color-container {
        display: flex;
        display: -webkit-flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        text-align: center;
        margin-top: 15px;
        & .color-item {
          height: 30px;
          line-height: 30px;
          width: 70px;
          margin-bottom: 10px;
          margin-right: 5px;
        }
        & .normal {
          border: 1rpx solid #dadada;
        }
        & .active {
          border: 1rpx solid #ff6b00;
          background: #ff6b00;
          color: #fff;
        }
        & .not-contains {
          background: #cccccc;
          color: #fff;
          border: 1rpx solid #cccccc;
        }
      }
    }
    & .count {
      margin-top: 15px;
      margin-bottom: 23px;
      color: #212121;
      font-size: 14px;
      display: flex;
      display: -webkit-flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  @include e(skufotter) {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    & button {
      height: 100%;
      line-height: 50px;
      background: #ff6b00;
      color: #fff;
      font-size: 16px;
      border-radius: 0;
    }
  }
}
